
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  StatusBar,
  TouchableOpacity,
  Animated,
  Dimensions,
} from 'react-native';
export default class MePlusTabBar extends Component{
	constructor(props){
        super(props); 
    }

  static  propTypes = {
    goToPage: React.PropTypes.func,
    activeTab: React.PropTypes.number,
    tabs: React.PropTypes.array,
    backgroundColor: React.PropTypes.string,
    activeTextColor: React.PropTypes.string,
    inactiveTextColor: React.PropTypes.string,
    textStyle: Text.propTypes.style,
    tabStyle: View.propTypes.style,
    renderTab: React.PropTypes.func,
    underlineStyle: View.propTypes.style,

    headIndex: React.PropTypes.number,
    tabImg: React.PropTypes.array,
    tabImgActive: React.PropTypes.array,
  };

  static defaultProps = {
  	  activeTextColor: 'navy',
      inactiveTextColor: 'black',
      backgroundColor: null,
  }; 

  renderTabOption(name, page) {
  }

  renderTab(name, page, isTabActive, onPressHandler) {
    const { activeTextColor, inactiveTextColor, textStyle, 
    		headIndex, tabImg, tabImgActive} = this.props;
    const textColor  = isTabActive ? activeTextColor : inactiveTextColor;
    const fontWeight = isTabActive ? 'bold' : 'normal';  
    const icon       = isTabActive ? tabImgActive[page] : tabImg[page]; 
    const isHead     = headIndex === page;
    return (
    	<TouchableOpacity  
        activeOpacity ={1} 
        key={name} 
        onPress={() => {
                          isHead ? null : onPressHandler(page)
                        }
                } 
        style={styles.tabOpacity}>
	    	<View style={styles.tabItem} >
	    		{
            isHead 
            ? null 
            : <Image source={icon} style={{width: 50, height: 50}}/>
          }
	    		<Text style={[{color: textColor, fontWeight: fontWeight}, textStyle]}>{name}</Text>
			</View>
		</TouchableOpacity>
    	)
  }



  render() {
    const containerWidth = this.props.containerWidth;
    const numberOfTabs = this.props.tabs.length;
    const tabUnderlineStyle = 
    {
      position: 'absolute',
      width: containerWidth / numberOfTabs,
      height: 4,
      backgroundColor: 'navy',
      bottom: 0,
    };

    const left = this.props.scrollValue.interpolate(
    {
      inputRange: [0, 1, ], outputRange: [0,  containerWidth / numberOfTabs, ],
    });

	//position
	const {height, width}=Dimensions.get('window');
	const headSize = this.props.headSize;
	const headLeft = (width-headSize)/2; 
	const isHeadActive = this.props.activeTab === this.props.headIndex;
	const headBorder = isHeadActive ? 'red' : 'transparent';　
    return (
    	<View>
      <StatusBar
          backgroundColor='#2F3435'
          barStyle="light-content"
        />
			<View style={[styles.tabs, {backgroundColor: this.props.backgroundColor, }, this.props.style, ]}>
				{
          this.props.tabs.map((name, page) => 
              { 
        				const isTabActive = this.props.activeTab === page;　
        				const renderTab   = this.props.renderTab || this.renderTab.bind(this);  
        				return renderTab(name, page, isTabActive, this.props.goToPage); 
      				})
        }

				<Animated.View style={[tabUnderlineStyle, { left, }, this.props.underlineStyle, ]} /> 
			</View>
			<TouchableOpacity 
          activeOpacity ={1}  
          onPress={() => this.props.goToPage(this.props.headIndex)} 
					style={
                  {
                    position:'absolute',
                    left:headLeft, 
                    bottom: 20,
                    width: 80, 
                    height: 80, 
                    borderRadius:40
                  }
                }>
				<Image 
          source={this.props.tabImg[this.props.headIndex]} 
				  style={
                  { 
                    width: headSize, 
                    height: headSize, 
                    borderRadius:headSize/2, 
                    borderWidth: 2,
                    borderColor: headBorder
                  }
                }/>
			</TouchableOpacity> 
    	</View>
    );
  }
}

const styles = StyleSheet.create({
	tabOpacity:{
		flex: 1,
		justifyContent: 'flex-end',
		alignItems: 'center',
	},
	tabItem:{
		flexDirection: 'column',
		alignItems: 'center',
	},
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 10,
  },
  tabs: { 
    height: 80,
    flexDirection: 'row',
    justifyContent: 'space-around',
    borderWidth: 0,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderColor: '#ccc',
  },
}); 
